<extend name="Manage/themes/default/base" />
<block name="main">
    <style>
        .resouce-item{
            margin-top: 5px;
        }
    </style>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <table class="table-form">
                    <tr>
                        <td width="100" align="right" class="td-title">
                            <span class="x-red">*</span>名称：
                        </td>
                        <td>
                            <input id="right_name" value="{{$info['right_name']??''}}" class="layui-input" size="40">
                        </td>
                    </tr>

                    <tr>
                        <td width="100" align="right" class="td-title">
                            <span class="x-red">*</span>编号：
                        </td>
                        <td>
                            <input id="right_code" value="{{$info['right_code']??''}}" class="layui-input" size="40">
                            <span class="x-red">(5个字符，字母和数字组成)</span>
                        </td>
                    </tr>

                    <tr>
                        <td width="100" align="right" class="td-title">
                            <span class="x-red"></span>是否菜单：
                        </td>
                        <td>
                            <input type="checkbox" lay-text="是|否" lay-skin="switch" lay-filter="is_menu" id="is_menu" <if condition="$info['is_menu'] eq 1 ">checked</if> >
                        </td>
                    </tr>

                    <tr <if condition="$info['is_menu'] eq 0 ">style="display: none"</if> data-menue="1">
                        <td width="100" align="right" class="td-title">
                            <span class="x-red"></span>菜单地址：
                        </td>
                        <td>
                            <input id="menu_url" value="{{$info['menu_url']??''}}"  class="layui-input" size="40">
                            <span>(非菜单无需填写)</span>
                        </td>
                    </tr>

                    <tr <if condition="$info['is_menu'] eq 0 ">style="display: none"</if> data-menue="1">
                        <td align="right" class="td-title">菜单图标:</td>
                        <td>
                            <div>
                                <button type="button" class="layui-btn" id="menueIconUpload">
                                    <i class="layui-icon"></i>选择图标
                                </button>
                            </div>
                            <input type="hidden" id="menu_icon" value="{{$info['menu_icon']??''}}" placeholder="" >
                            <img id="icon_img" style="margin-top: 5px;" src="{{$info['menu_icon_url']??''}}" width="100">
                        </td>
                    </tr>

                    <tr>
                        <td width="100" align="right" class="td-title">
                            <span class="x-red"></span>排序：
                        </td>
                        <td>
                            <input id="sort" value="{{$info['sort']??50}}"  class="layui-input" size="20">
                            <span>(1~99整数，越小排越前)</span>
                        </td>
                    </tr>

                    <tr>
                        <td width="100" align="right" class="td-title">
                            <span class="x-red"></span>是否显示：
                        </td>
                        <td>
                            <input type="checkbox" lay-text="是|否" lay-skin="switch" lay-filter="is_show" id="is_show" <if condition="$info['is_show'] eq 1 ">checked</if> >
                        </td>
                    </tr>

                    <tr>
                        <td width="100" align="right" class="td-title">
                            <span class="x-red"></span>所属功能：
                        </td>
                        <td>
                            <div class="form-select">
                                <select id="module_id">
                                    <option value="0">选择功能</option>
                                    <foreach name="moduleList" key="k" item="value" >
                                        <option value="{{$value.id}}" <if condition="$info['module_id'] eq $value['id'] "> selected </if> > {{$value.name}}</option>
                                    </foreach>
                                </select>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td width="100" align="right" class="td-title">
                            <span class="x-red"></span>客户端：
                        </td>
                        <td>
                            <div class="form-select">
                                <select id="clients_id">
                                    <option value="0">选择客户端</option>
                                    <foreach name="clientsList" key="k" item="value" >
                                        <option value="{{$value.id}}" <if condition="$info['clients_id'] eq $value['id'] "> selected </if> > {{$value.name}}</option>
                                    </foreach>
                                </select>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td width="100" align="right" class="td-title">
                            <span class="x-red"></span>备注：
                        </td>
                        <td>
                            <textarea id="remark" cols="100" rows="4" style="resize: none">{{$info['remark']??''}}</textarea>
                        </td>
                    </tr>

                    <tr>
                        <td align="right" class="td-title" valign="top">关联资源:</td>
                        <td valign="top">
                            <a href="javascript:void(0)" class="layui-btn layui-btn-xs layui-btn-normal" onclick="Pages.addResource()"><i class="layui-icon">&#xe654;</i>添加资源</a>
                            <p class="x-red">不定参数用{data}表示, 不要携带客户端前缀</p>
                            <div id="resource_box">
                                <foreach name="$info['resource_list']" key="k" item="rlist" >

                                    <div class="resouce-item">
                                        <div class="form-select">
                                            <select id="clients_id">
                                                <option value="get" <if condition="$rlist['http_type'] eq 'get' ">selected </if> >GET</option>
                                                <option value="post" <if condition="$rlist['http_type'] eq 'post' ">selected </if> >POST</option>
                                                <option value="put" <if condition="$rlist['http_type'] eq 'put' ">selected </if> >PUT</option>
                                                <option value="patch" <if condition="$rlist['http_type'] eq 'patch' ">selected </if> >PATCH</option>
                                                <option value="delete" <if condition="$rlist['http_type'] eq 'delete' ">selected </if> >DELETE</option>
                                            </select>
                                        </div>
                                        <input type="text" name="" value="{{$rlist['path']}}" class="layui-input" placeholder="资源路径" size="40" data-type="path">
                                        <a href="javascript:void(0)" class="layui-btn layui-btn-xs layui-btn-danger" onclick="Pages.deleteResource(this)"><i class="layui-icon">&#x1006;</i>删除</a>
                                    </div>
                                </foreach>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td></td>
                        <td>
                            <button class="layui-btn layui-btn-danger layui-btn-lg" onclick="Pages.sureSave()" type="button">确定保存</button>
                        </td>
                    </tr>
                </table>
                <input type="hidden" id="parent_id" value="{{$parent_id}}">
            </form>
        </div>
    </div>
    <script>
        var form;
        var upload;
        var id = parseInt({{$id??0}});

        layui.use(['form','upload'], function(){
            form = layui.form;
            upload = layui.upload;
            upload.render({
                elem: '#menueIconUpload',
                url: VK.U('modules/rights/icon'), //上传接口
                field: "file",
                done: function (res) {
                    if (res.status == 200){
                        $("#menu_icon").val(res.data.savePath);
                        $("#icon_img").attr('src', res.data.url);
                    }else{
                        VK.error(res.msg);
                    }
                },
                error: function (res) {
                    VK.error(res.msg);
                }
            });
            form.on('switch(is_menu)', function (data) {
                if(data.elem.checked){
                    $('tr[data-menue="1"]').show();
                }else{
                    $('tr[data-menue="1"]').hide();
                }
            });
        });

        var Pages = {
            canOperate:true, //能否操作
            addResource:function(){
                var str = '';
                str += '<div class="resouce-item">';
                str += '    <div class="form-select">';
                str += '        <select id="clients_id">';
                str += '            <option value="get">GET</option>';
                str += '            <option value="post">POST</option>';
                str += '            <option value="put">PUT</option>';
                str += '            <option value="patch">PATCH</option>';
                str += '            <option value="delete">DELETE</option>';
                str += '        </select>';
                str += '    </div>';
                str += '    <input type="text" name="" class="layui-input" placeholder="资源路径" size="40" data-type="path">';
                str += '    <a href="javascript:void(0)" class="layui-btn layui-btn-xs layui-btn-danger" onclick="data.deleteResouce(this)"><i class="layui-icon">&#x1006;</i>删除</a>';
                str+='</div>';
                $('#resource_box').append(str);
                form.render();
            },
            deleteResource:function(obj){
                $(obj).closest('.resouce-item').remove();
            },
            sureSave:function(){
                if(!Pages.canOperate){
                    return false;
                }
                var params = {};
                params.right_name = $('#right_name').val();
                params.right_code = $('#right_code').val();
                params.id = id;
                params.module_id = $('#module_id').val();
                params.clients_id = $('#clients_id').val();
                params.is_menu = $('#is_menu').prop('checked')?1:0;
                params.is_show = $('#is_show').prop('checked')?1:0;
                params.parent_id = $('#parent_id').val();
                var resouceObj = $('.resouce-item');
                var resourceList = new Array();
                for(var i=0; i<resouceObj.length; i++){
                    var httpType = resouceObj.eq(i).find('select').val();
                    var path = resouceObj.eq(i).find('input[data-type="path"]').val();
                    if(!httpType){
                        VK.error('请选择http类型');
                        return false;
                    }
                    if(!path){
                        VK.error('请输入资源地址');
                        return false;
                    }
                    resourceList.push(httpType+':'+path);
                }
                params.resource = '';
                if(resourceList){
                    params.resource = resourceList.join(',');
                }
                params.clients_id = $('#clients_id').val();
                params.menu_url = $('#menu_url').val();
                params.sort = $('#sort').val();
                params.menu_icon = $('#menu_icon').val();
                params.remark = $('#remark').val();


                var loading = VK.load();
                var method = id >0 ? 'PUT':'POST';
                var url = id>0 ? VK.U('modules/rights/'+id):VK.U('modules/rights');
                Pages.canOperate = false;
                VK.QAjax(url,method,params,function (res) {
                    VK.closeLoad(loading);
                    if (res.status != 200){
                        Pages.canOperate = true;
                        VK.error(res.msg);
                        return false;
                    }
                    VK.success(res.msg);
                    setTimeout(function(){
                        VK.nofifyParentPage("reloadList");
                        VK.closeNowPage();
                    },1500);
                },function (res) {
                    VK.closeLoad(loading);
                    Pages.canOperate = true;
                    VK.error('系统出错稍后再试');
                });
            }
        }

    </script>
</block>